<template>
	<view class="login-forget">
		<view class="title">{{ title }}</view>
		<view class="login-content">
			<view class="account">
				<input class="input-style" type="number" maxlength="11" placeholder-class="placeholder-style"
					placeholder="登录账号" v-model="account" :focus="accountFocus" @blur="accountLostFocus">
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
			<view class="vertify">
				<input class="input-style-two" type="text" maxlength="8" placeholder-class="placeholder-style"
					placeholder="验证码" v-model="vertifyCode" :focus="vertifyCodeFocus" @blur="vertifyCodeLostFocus">
				<view class="right">
					<view class="left-line"></view>
					<view class="text-style-one">
						<view class="code-style">
							<view :class="`code ${disabled ? 'disabled' : ''}`" @click="getVilidCode()">
								{{ time }}{{ text }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
			<view class="password">
				<input class="input-style" type="text" placeholder-class="placeholder-style" placeholder="登录密码"
					v-model="password" :password="isPassword_one" :focus="passwordFocus" @blur="passwordLostFocus">
				<image class="image" :src="img_one" mode="widthFix" @click="changeImg(1)"></image>
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
			<view class="password">
				<input class="input-style-two" type="text" placeholder-class="placeholder-style" placeholder="确认密码"
					v-model="confirmPassword" :password="isPassword_two" :focus="confirmPasswordFocus" @blur="confirmPasswordLostFocus">
				<image class="image" :src="img_two" mode="widthFix" @click="changeImg(2)"></image>
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
		</view>
		<view class="login-button" @click="confirm">确定</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		sendSms,
		ForgetPassword
	} from '@/common/api.js';
	export default {
		data() {
			return {
				title: '忘记密码',

				/* 忘记密码 */
				account: '', // 登录账号
				accountFocus: false, // 登录账号状态
				vertifyCode: '', // 验证码
				vertifyCodeFocus: false, // 验证码状态
				isSuccess: false, // 是否成功获取验证码
				password: '', // 登录密码
				passwordFocus: false, // 登录密码状态
				confirmPassword: '', // 确认登录密码
				confirmPasswordFocus: false, // 确认登录密码状态

				/* 发送验证码 */
				text: '发送验证码', // 获取验证码消息
				time: '', // 获取验证码倒计时
				disabled: false, // 判断是否已经点击
				
				/* 密码点击显示 */
				img_one: '/static/images/login/hide.png', // 密码显示
				img_two: '/static/images/login/hide.png', // 确认密码显示
				isPassword_one: true, // 是否显示密码
				isPassword_two: true, // 是否显示确认密码
			};
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {

			/* 跳转至重置密码 */
			// navigatePassword() {
			// 	const that = this;
			// 	if (that.account === '') {
			// 		Fn.Toast('请输入手机号', 3, 1500);
			// 		that.accountFocus = true;
			// 		return;
			// 	};
			// 	if (that.vertifyCode === '') {
			// 		Fn.Toast('请先获取验证码', 3, 1500);
			// 		that.vertifyCodeFocus = true;
			// 		return;
			// 	};
			// 	if (that.isSuccess) {
			// 		uni.navigateTo({
			// 			url: '/pages/login/forget/resetPassword/resetPassword?mobile=' + that.account +
			// 				'&vertifyCode=' + that.vertifyCode,
			// 		});
			// 	} else {
			// 		Fn.Toast('请填写正确的验证码', 3, 1500);
			// 	};
			// },
			
			/* 确定重置密码 */
			confirm() {
				const that = this;
				if (that.account === '') {
					Fn.Toast('手机号不能为空', 3, 1500);
					that.accountFocus = true;
					return;
				};
				if (that.vertifyCode === '') {
					Fn.Toast('请先获取验证码', 3, 1500);
					that.vertifyCodeFocus = true;
					return;
				};
				if (that.password === '') {
					Fn.Toast('登录密码不能为空', 3, 1500);
					that.passwordFocus = true;
					return;
				};
				if (that.confirmPassword === '') {
					Fn.Toast('确认登录密码不能为空', 3, 1500);
					that.confirmPasswordFocus = true;
					return;
				};
				if (that.confirmPassword != that.password) {
					Fn.Toast('两次密码不一样，请重新输入', 3, 1500);
					that.confirmPasswordFocus = true;
					return;
				};
				const params = {
					phone: that.account,
					code: that.vertifyCode,
					password: that.password,
					confirm_password: that.confirmPassword,
				};
				ForgetPassword(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						// console.log(res);
						Fn.Toast(res.msg, 3, 1500);
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500);
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 获取短信验证号 */
			async getVilidCode() {
				// const pphone = /^1[3456789]\d{9}$/;
				const that = this;
				if (that.disabled) {
					return;
				}
				if (that.account === '') {
					Fn.Toast('手机号不能为空', 3, 1500);
					return;
				};
				const params = {
					phone: that.account,
					type: 2
				};
				await sendSms(params).then((res) => {
					if (res.status === 1) {
						const result = res;
						// console.log(result);
						Fn.Toast('请注意查收验证码', 3, 1500);
						// that.isSuccess = true;
						that.disabled = true;
						that.setInterValFunc();
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 验证码框 */
			setInterValFunc() {
				this.time = 60;
				this.text = 's后重新获取';
				this.setTime = setInterval(() => {
					if (this.time - 1 == 0) {
						this.time = '';
						this.text = '重新发送';
						this.disabled = false;
						clearInterval(this.setTime);
					} else {
						this.time--;
					}
				}, 1000);
			},
			
			/* 更改Img样式 */
			changeImg(option) {
				const show = '/static/images/login/show.png';
				const hide = '/static/images/login/hide.png';
				if (option == 1) {
					if (this.img_one == hide) {
						this.img_one = show;
						this.isPassword_one = false;
					} else {
						this.img_one = hide;
						this.isPassword_one = true;
					};
				} else {
					if (this.img_two == hide) {
						this.img_two = show;
						this.isPassword_two = false;
					} else {
						this.img_two = hide;
						this.isPassword_two = true;
					};
				};
			},

			/* 手机号失去焦点时 */
			accountLostFocus(event) {
				this.accountFocus = false;
			},

			/* 验证码失去焦点时 */
			vertifyCodeLostFocus(event) {
				this.vertifyCodeFocus = false;
			},
			
			/* 登录密码失去焦点时 */
			passwordLostFocus(event) {
				this.passwordFocus = false;
			},
			
			/* 确认登录密码失去焦点时 */
			confirmPasswordLostFocus(event) {
				this.confirmPasswordFocus = false;
			},
		}
	}
</script>

<style lang="scss">
	.login-forget {
		padding: 0 34px;
		font-family: PingFang_Medium;

		.title {
			padding: 10vh 0;
			font-size: 46rpx;
			// font-weight: 600;
			font-family: PingFang_Bold;
		}

		.login-content {

			.input-style {
				width: 50vw;
				font-size: 30rpx;
				// font-weight: 600;
				font-family: PingFang_Bold;
				line-height: 60rpx;
			}

			.input-style-two {
				width: 45vw;
				font-size: 30rpx;
				// font-weight: 600;
				font-family: PingFang_Bold;
				line-height: 60rpx;
			}

			.placeholder-style {
				color: #CDCDCD;
				// line-height: 60rpx;
			}

			.content-title {
				margin-right: 40rpx;
				color: #000000;
				font-size: 34rpx;
				// font-weight: 600;
				height: 60rpx;
				font-family: PingFang_Bold;
			}

			.account {
				display: flex;
				align-items: center;
			}

			.vertify {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right {
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					.left-line {
						height: 50rpx;
						border-left: 2px solid #CDCDCD;
					}

					.text-style-one {
						// display: flex;
						// align-items: center;
						cursor: pointer;

						.title {
							color: #E6D19F;
							font-size: 32rpx;
							// font-weight: 600;
							width: 23vw;
							font-family: PingFang_Bold;
						}

						.code-style {
							display: flex;
							align-items: center;

							.input-style {
								margin-top: 10rpx;
								width: 40vw;
								color: #4B2113;
								// font-weight: 600;
								font-family: PingFang_Bold;
							}

							.code {
								margin-left: 20rpx;
								// color: #FDAC00;
								font-size: 28rpx;
								// font-weight: 600;
								font-family: PingFang_Bold;
							}

							.disabled {
								pointer-events: none;
								cursor: default;
								opacity: 0.6;
							}
						}

						.input-style-one {
							width: 100%;
							margin-top: 10rpx;
							color: #4B2113;
							// font-weight: 600;
						}

						.placeholder-style {
							color: #4B2113;
							font-size: 30rpx;
							// font-weight: 600;
						}
					}
				}
			}
			
			.image {
				width: 5vw;
				height: 5vw;
				margin-right: 20rpx;
				cursor: pointer;
			}
			
			.password {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.login-button {
			background-color: #000000;
			margin: 5vh 0;
			text-align: center;
			color: #FFFFFF;
			font-size: 34rpx;
			// font-weight: 600;
			border-radius: 5px;
			line-height: 80rpx;
			box-shadow: 0px 2px 20px #dedede;
			// cursor: pointer;
			font-family: PingFang_Bold;
		}
	}
</style>
